<template>
    <div class="listenbook">
        <div v-if="thirdStyle.length != 0">
            <div class="banner">
                <banner-comp :banners="bannerlist"></banner-comp>
            </div>

            <!-- <div class="nav">
            <list-nav :shortCut="shortCutlist"></list-nav>
        </div> -->

            <div class="style-module" v-for="(item, index) in fristStyle" :key="index + 1">
                <plate-style :frist="item"></plate-style>
            </div>

            <!-- <div class="style-module">
            <plate-style-two :second="secondStyle"></plate-style-two>
        </div> -->

            <div class="style-module" v-for="(item, index) in thirdStyle" :key="index + 4">
                <plate-style-list :third="item"></plate-style-list>
            </div>
        </div>
        <div class="loading" v-else>数据加载中...</div>
    </div>
</template>

<script>
import { bookShow } from "@/api/found";
import BannerComp from "@/components/banner-comp.vue";
import ListNav from "@/components/list-nav.vue";

import PlateStyle from "@/components/plate-style.vue";
import PlateStyleTwo from "@/components/plate-style-two.vue";
import PlateStyleList from "@/components/plate-style-list.vue";
export default {
    data() {
        return {
            bannerlist: [],
            shortCutlist: [],
            fristStyle: [],
            secondStyle: [],
            thirdStyle: [],
        };
    },
    methods: {
        async getShow() {
            let data = {
                type: this.$route.query.type,
                uuid: this.$route.query.uuid,
            };
            await bookShow({
                data,
            }).then((res) => {
                let data = res.data.list;
                console.log(data);
                let banner = data.slice(0, 1);
                this.bannerlist = banner[0].banners;
                // console.log(this.bannerlist);

                // let shortCuts = data.slice(1, 2);
                // this.shortCutlist = shortCuts[0].shortCut;
                // console.log(this.shortCutlist);

                this.fristStyle = data.slice(1, 2);
                // console.log(this.fristStyle);

                // let short = data.slice(1, 2);
                // this.secondStyle = short[0];
                // console.log(this.secondStyle);

                this.thirdStyle = data.slice(3);
                // console.log(this.thirdStyle);
            });
        },
    },
    created() {
        this.getShow();
    },
    components: {
        BannerComp,
        ListNav,
        PlateStyle,
        PlateStyleTwo,
        PlateStyleList,
    },
};
</script>

<style lang="scss" scoped>
.listenbook {
    padding: 10px 0;
    width: 100%;
    // height: 2000px;
    margin-bottom: 50px;

    .nav {
        padding: 20px 0 10px;
    }

    .style-module {
        margin-bottom: 20px;
    }
    .loading {
        width: 100px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        height: 400px;
    }
}
</style>
